<script setup>
import { useRouter } from "vue-router";
import { ref, onMounted, watch, reactive } from "vue";
import * as Api from "@req/api";
import { suc } from "./utils";
const collapsed = ref(false);
const envCfg = import.meta.env;
const selectedKeys = ref([]);
const router = useRouter();
const isLogin = ref(false);
const userInfo = ref({});
const bImg = ref("");
const formState = reactive({
  username: "kenshi",
  password: "admin123",
});

const menuList = [
  { name: "产品分类", path: "/categorie" },
  { name: "产品列表", path: "/productList" },
  { name: "博客列表", path: "/blog" },
  { name: "首页文章配置", path: "/homeblog" },
  { name: "基础配置", path: "/config" },
  { name: "用户列表", path: "/nameList" },
  { name: "inquiry配置", path: "/inquiryEdit" },
];

onMounted(() => {
  let token = localStorage.getItem("token");
  let userInfoData = localStorage.getItem("userInfo");
  isLogin.value = !!token;
  userInfo.value = JSON.parse(userInfoData);
  selectedKeys.value = [router.currentRoute.value.fullPath];
});

const toPath = (item) => {
  router.push(item.path);
};

const onFinish = (values) => {
  Api.userLogin(values).then((res) => {
    if (suc(res.status)) {
      let token = res.data.user_id;
      localStorage.setItem("token", token);
      localStorage.setItem("userInfo", JSON.stringify(values));
      userInfo.value = values;
      isLogin.value = !!token;
    }
  });
};

const loginOut = () => {
  Api.userLogout(localStorage.getItem("token")).then(res => {
    if (suc(res.status)) {
      localStorage.removeItem("token");
      localStorage.removeItem("userInfo");
      let token = localStorage.getItem("token");
      isLogin.value = !!token;
      message.success(res.message)
    }
  })
};
</script>

<template>
  <a-config-provider :theme="{
    token: {
      colorPrimary: '#67C5CB',
    },
  }">
    <a-layout style="min-height: 100vh" v-if="isLogin">
      <a-layout-sider v-model:collapsed="collapsed" theme="light">
        <img class="logo" src="./assets/logo.png" alt="" />
        <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline">
          <a-menu-item v-for="item in menuList" :key="item.path" @click="toPath(item)">
            <span>{{ item.name }}</span>
          </a-menu-item>
        </a-menu>
        <div class="user-info" v-if="isLogin">
          <span>用户：{{ userInfo.username }}</span>
          <a-button type="primary" @click="loginOut">退出</a-button>
        </div>
      </a-layout-sider>
      <a-layout>
        <a-layout-header :style="`background: #67C5CB`" />
        <a-layout-content style="margin: 0 16px">
          <div class="app-main"><router-view /></div>
        </a-layout-content>
      </a-layout>
    </a-layout>
    <div class="login-box" v-else>
      <div class="login">
        <div class="title">登录</div>
        <a-form :model="formState" name="basic" class="login-form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
          autocomplete="off" @finish="onFinish">
          <a-form-item label="帐号" name="username" :rules="[{ required: true, message: '请输入您的帐号' }]">
            <a-input v-model:value="formState.username" />
          </a-form-item>

          <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入您的密码' }]">
            <a-input-password v-model:value="formState.password" />
          </a-form-item>
          <span class="tips">忘记密码请联系管理员重置</span>
          <a-form-item :wrapper-col="{ offset: 19, span: 16 }">
            <a-button type="primary" html-type="submit">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </a-config-provider>
</template>

<style lang='postcss' scoped>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme="dark"] .site-layout .site-layout-background {
  background: #141414;
}

.logo {
  height: 24px;
  margin: 20px auto;
  will-change: filter;
  display: block;
  margin-bottom: 15px;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 1px #00b6e8aa);
}

.app-main {
  margin-top: 16px;
  border-radius: 5px;
  background-color: #fff;
}

.user-info {
  width: 200px;
  position: absolute;
  bottom: 30px;
  left: 0;
  display: flex;
  align-items: center;
  flex-direction: column;

  span {
    display: block;
    margin-bottom: 20px;
  }
}

.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 180px;

  .login {
    border: 1px solid #d3d3d3;
    border-radius: 8px;
    box-sizing: border-box;
    width: 400px;
    overflow: hidden;
    margin-bottom: 80px;

    .title {
      height: 40px;
      color: #fff;
      background-color: #67C5CB;
      line-height: 40px;
      text-align: center;
      margin-bottom: 20px;
    }

    .login-form {
      padding: 0 30px 0 0;

      .tips {
        margin-left: 80px;
        font-size: 12px;
        color: gray;
      }
    }
  }
}
</style>
